<template>
  <div class="lsc-mycenter-order">
    <van-nav-bar
      title="我的订单"
      left-arrow
      @click-left="onClickBack"
    />
    <van-tabs @click="onTabs"  :active="active">
      <van-tab v-for="(title, index) in title" :title="title" :key="index" >

        <div class="lsc-mycenter-order-box" v-for="(item,ind) in orderList" :key="ind">
          <van-panel 
          title="订单号" 
          :desc="item.orderno" 
          :status="item.pay_status==0 ? '未付款' : '已付款'">
            <van-row class="lsc-mycenter-order-info">
              <van-col offset="1" span="5">订单金额：</van-col>
              <van-col span="16">{{(item.op_status===3 || item.op_status===6) ? item.sub_price : ''}}</van-col>
              <div style="clear:both"></div>
              <van-col offset="1" span="5">提交日期：</van-col>
              <van-col span="16">{{item.createtime}}</van-col>
              <router-link :to="'/ordersdetail?id='+item.id + '&tapid='+ index">
                <van-icon name="arrow" style="position:absolute; top: 15px; right: 15px;"/>
              </router-link>
            </van-row>
            <div class="lsc-order-list-box">
              <van-card
                :title="item.name"
                :desc="item.model_no"
                :num="item.qty"
                :thumb="item.img_url"
              >
              </van-card>
            </div>
          </van-panel>
        </div>
        <div 
          class="lsc-loading" 
          @click="loadMore(index)"
          v-if="pageinfo.total > orderList.length" >
          加载更多...
        </div>
      </van-tab>
    </van-tabs>

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'orders',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      accesories: 'getAccesories'
    })
  },
  data () {
    return {
      active: 0,
      title: ['全部订单','待付款','待审核','已审核','已下料','已报价','已发货'],
      orderList: [],
      pageinfo: {
        status: 0,
        pageindex: 1,
        pagesize: 10,
        total: 0
      }
    }
  },
  created() {
    this.active = this.$route.query.tapid || 0
    this.onTabs(this.active)
  },
  methods: {
    onClickBack() {
      this.$router.push('/mycenter')
    },
    onTabs(index) {
      this.orderList = []
      this.pageinfo.pageindex = 1
      this.pageinfo.total = 0
      this.getOrderList(index)
    },
    getOrderList(index) {
      this.$store.dispatch('fetchLoading', true)
      this.pageinfo.status = index-1
      this.axios.get(api.order.list, {params: this.pageinfo})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.orderList = res.data.data ? this.orderList.concat(res.data.data) : []
            this.pageinfo.total = res.data.pageinfo.total 
          }
        })
    },
    orderStatus(op_status, pay_status) {
      console.log(op_status)
      let opStatus = ''
      let payStatus = pay_status==0 ? '未付款' : '已付款'
      switch (op_status) {
        case '0':
            opStatus = '全部订单'
          break
        case '1':
            opStatus = '未审核'
          break
        case '2':
            opStatus = '已审核'
          break
        case '3':
            opStatus = '已下料'
          break
        case '4':
            opStatus = '已报价'
          break
        case '5':
            opStatus = '取消'
          break
        case '6':
            opStatus = '已发货'
          break
      }

      return `${opStatus}/${payStatus}`
    },
    loadMore(index) {
      this.pageinfo.pageindex += 1
      this.getOrderList(index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-mycenter-order-box {
  margin-top: 5px;
  margin-bottom: 10px;
}
.lsc-mycenter-order-info {
  position: relative;
  margin: 10px 0;
}

.lsc-mycenter-order-info>div {
  padding-bottom: 5px;
}
.lsc-mycenter-order .van-card__row {
  margin-top: 8px;
}
/* .lsc-mycenter-order-info {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.lsc-mycenter-order-info-col {
  padding-bottom: 8px;
  font-size: 12px;
}
.lsc-mycenter-order-info-col:nth-child(4) {
  color: #f44;
}
.lsc-mycenter-order-info-col:last-child {
  padding-bottom: 0;
  color: #38f;
  text-align: right;
} */
</style>
